<template>
    <!--为了解决网速慢的时候，先显示下面的数据，图片加载之后数据又下移的问题，图片抖动解决。-->
    <div class="wrapper">
        <!--:等于 v-bind,绑定的元素， @是v-on的缩写，绑定的事件-->
        <swiper :options="swiperOption" v-if="showSwiper">

          <!--<swiper-slide v-for="item in swiperList" :key="item.id">-->
          <swiper-slide v-for="item in list" :key="item.id" >
              <img :src="item.imgUrl" class="swiper-img" />
          </swiper-slide>


          <!--下面的小点-->
          <div class="swiper-pagination" slot="pagination"></div>
          <!--左箭头-->
          <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
          <!--右箭头  -->
          <!--<div class="swiper-button-next" slot="button-next"></div>-->
          <!--最下面的滚动条-->
          <!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
        </swiper>
    </div>
</template>

<script>

  // 轮播图组件
  export default {
    name: 'HomeSwiper',
    props: {
      list: Array
    },
    //子组件定义数据，数据必须是函数,ES6中可以省略function
    data() {
        return {
          swiperOption: {
              /*用于控制轮播图上面的小点*/
              pagination: '.swiper-pagination',
              /*支持轮播图循环滚动*/
              loop: true,
              //是否自动滚动,滚动的频率
              autoplay: 3000,
          },
          /*swiperList: [
            {
              id: '001',
              imgUrl: "http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg"
            },
            {
              id: '002',
              imgUrl: "http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg"
            },
            {
              id: '003',
              imgUrl: "http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg"
            }
          ]*/

        }
    },
    //计算属性
    computed: {
      showSwiper() {
        return this.list.length
      }
    }

  }
</script>

<style lang="stylus" scoped>
    .wrapper >>> .swiper-pagination-bullet-active
      background: #fff
    .wrapper
      width: 100%
      /*height : 0vm*/
      overflow: hidden
      height: 0
      //图片始终占百分比这么多
      padding-bottom: 32.00%
      //网速慢的时候先让它是灰色的
      background: #eee
      .swiper-img
        width: 100%;

</style>
